<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
			<text class="title">{{msg}}</text>
		</view>
		<view class="text-area">
			<button @click="dianwo">点我</button>
			<button @click="dianwo2">点我2</button>
			<button @click="changeMsg">changeMsg</button>
		</view>
		<view class="text-area">
			<button @click="loadingOpen">loading</button>
			<button @click="whereAreYou">我在哪</button>
			<button @click="showToastHandle">showToast-时间</button>
		</view>
		<view class="text-area">
			<button @click="openPoem">今日诗词</button>
		</view>
	</view>
</template>

<script>
	let md5 = require('md5')
	// 下面两种导入均可
	// let dayjs = require('dayjs')
	import dayjs from 'dayjs' // ES 2015
	export default {
		data() {
			return {
				title: 'hello world',
				msg: '我要改变'
			}
		},
		mounted() {
			console.log('...mounted...')
		},
		onLoad() {
			console.log('...onLoad...')
		},
		methods: {
			dianwo: function() {
				console.log("dianwo")
				this.title = 'dianwo';
				console.log(this)
			},
			dianwo2() {
				console.log("dianwo2")
				this.title = 'dianwo2';
				console.log('admin的md5为:', md5('admin'))
				uni.showToast({
					title: '标题-成功',
					duration: 2000,
					success() {
						console.log('dianwo2 showToast 成功了')
					}
				});
			},
			changeMsg() {
				console.log("changeMsg")
				console.log(this)
				this.msg = 'changeMsg 我改变了';
			},
			loadingOpen() {
				uni.showLoading({
					title: '等一等'
				});
				setTimeout(function() {
					uni.hideLoading();
				}, 2000);
			},
			whereAreYou() {
				console.log('点击了,我在哪')
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：', res.longitude);
						console.log('当前位置的纬度：', res.latitude);
						let where = '当前位置的经纬度：' + res.longitude + ' | ' + res.latitude;
						uni.showToast({
							title: where,
							duration: 6000,
							icon: 'none',
							success() {
								console.log(where)
							}
						});
					},
					fail: (err) => {
						console.log('err -> ', err)
						let errMsg = '当前err msg为:' + err.errMsg;
						uni.showToast({
							title: errMsg,
							duration: 2000,
							icon: 'none',
							success() {
								console.log(errMsg)
							}
						});
					},
					complete() {
						console.log('whereAreYou 我在哪 调用完成')
					}
				});
			},
			showToastHandle() {
				console.log('点击了,showToastHandle')
				let nowtime = '当前时间: ' + dayjs().format('YYYY-MM-DD HH:mm:ss')
				uni.showToast({
					title: nowtime,
					duration: 2000,
					icon: 'none',
					success() {
						console.log(nowtime)
					},
					fail: (err) => {
						console.log(err)
					},
					// 下面写法三种均可
					complete: () => {
						console.log('showToastHandle complete1')
					}

					// complete() {
					// 	console.log('showToastHandle complete2')
					// }

					// complete:function(){
					// 	console.log('showToastHandle complete3')
					// }
				});
			},
			openPoem() {
				console.log('跳转到今日诗词页面')
				uni.navigateTo({
					url: '../poem/poem',
					animationType: 'pop-in',
					animationDuration: 200,
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						acceptDataFromOpenedPage: function(data) {
							// console.log(data)
							console.log('...当前页面...acceptDataFromOpenedPage...', JSON.stringify(data))
						},
						someEvent: function(data) {
							// console.log(data)
							console.log('...当前页面...someEvent...', JSON.stringify(data))
						}
					},
					success(res) {
						console.log('打开今日诗词页面成功')
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: '...acceptDataFromOpenerPage...开始传送数据...今天的诗词是什么呢？'
						})
					},
					fail(err) {
						console.log('打开今日诗词页面失败', err)
					},
					complete() {
						console.log('打开今日诗词页面完成')
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
